<!DOCTYPE html>

<div id="profession_table_div">

	<!-- 查询窗口 -->
	<div class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">查询</h4>
				</div>
				<div class="modal-body">
					<!-- 以下为要查询的的内容 -->
					<div class="form-group">
						<label for="search_year">年级</label> <input id="search_year"
							type="text" class="form-control" name="year"
							data-bind="value:queryCondition.year" placeholder="年级">
					</div>
					<div class="form-group">
						<label for="search_college">学院</label> <input id="search_college"
							type="text" class="form-control" name="college"
							data-bind="value:queryCondition.college" placeholder="学院">
					</div>
					<div class="form-group">
						<label for="search_profesion">专业</label> <input
							id="search_profesion" type="text" class="form-control"
							name="profesion" data-bind="value:queryCondition.profesion"
							placeholder="专业">
					</div>
					<!-- 以上为要查询的内容 -->
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal"
						data-bind="click:queryClick">
						<span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询
					</button>
					<button type="button" class="btn btn-default" data-dismiss="modal"
						data-bind="click:clearClick">
						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空
					</button>
				</div>
			</div>

		</div>
	</div>

	<!-- 工具栏 -->
	<div id="toolbar" class="btn-group">
		<button data-bind="click:addClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
		</button>
		<button data-bind="click:editClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
		</button>
		<button data-bind="click:deleteClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
		</button>
		<button data-bind="click:searchClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
		</button>
		<button type="button" class="btn btn-primary" data-toggle="modal"
			onclick="tan()">
			<span class="glyphicon glyphicon-object-align-bottom"
				aria-hidden="true"></span>批量新增
		</button>

	</div>

	<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
	<table id="mytable" data-bind="bootstrapTable:$root">
		<thead>
			<tr>
				<th data-checkbox="true"></th>
				<th data-field="year">年级</th>
				<th data-field="college">学院</th>
				<th data-field="profesion">专业</th>
				<th data-field="code">专业代码</th>
			</tr>
		</thead>
	</table>
</div>

<!-- 批量新增学年模态框（Modal） -->
<div class="modal fade" id="MyNews" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">新增学年</h4>
			</div>
			
			<div class="modal-body">
								<div class="form-group">
						<label for="search_college">参考学院</label> 
						<select id="college2" name="college"  class="selectpicker form-control">
								<option style="display: none;"></option>
							</select>
					</div>
		<div class="form-group">
						<label for="search_year">年级</label> 
						
						<input id="myYear"
							type="text" class="form-control" name="year"
							data-bind="value:queryCondition.year" placeholder="年级" onkeyup = "value=value.replace(/[^\d]/g,'')">
					</div>
					<div class="form-group">
					 <p style="color: red">温馨提示：此功能会在您输入的年级下自动添加该学院下已有的所有专业！</p>
					</div>
				<div class="modal-footer">
				<button type="button" class="btn btn-primary" onclick="newYears()">确定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
		</div>
	</div>
	<!-- 以下是javascript内容 -->
<script type="text/javascript">
	$(function(){
		//初始化学院下拉框
		$("#college2").selectpicker({
			title : '选择学院'
		});
		
		$.post('profession/foundCollegeInput',function(data){
			   for (var i = 0; i < data.length; i++) {  
		            $('#college2').append("<option value=" + data[i].name + "> "+data[i].name +"</option>");  
		        }  
		        // 缺一不可  
		        $('#college2').selectpicker('refresh');  
		});
		
/* 		//年级框验证
		$('#dog').bootstrapValidator({
			 message: 'This value is not valid',
	            feedbackIcons: {
	                valid: 'glyphicon glyphicon-ok',
	                invalid: 'glyphicon glyphicon-remove',
	                validating: 'glyphicon glyphicon-refresh'
	            },
	            fields:{
	            	message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
	            }
		}); */
	});
	
function tan(){
	$('#MyNews').modal('show');
}
//新增学年相关
function newYears(){
	var year=$('#myYear').val();
	var college=$('#college2').val();
	$.post('profession/newYear',{year:year,college:college},function(data){
		$('#MyNews').modal("hide");
		  $("#mytable").bootstrapTable("refresh", {
			    silent: true //静态刷新 
			  });
	});
}

$(function(){
    var data =  {
	    tableParams : {
	    	url : 'profession/page'
	    	},
	    	urls : {
	    		delete : 'profession/delete',
	    		update : 'profession/edit',
	    		add : 'profession/edit',
	    		search:'profession/search'
	    	},
	    	queryCondition : {
	    		year : '',
	    		college : '',
	    		profesion : ''
	    	}
	};
	ko.applyBindings(new BsTableViewModel(data),document.getElementById('profession_table_div'));	
	
});
function typeformatter(value,row,index){
	return value==0?'平时考核':'期末考试';
}


</script>